<template>
  <view class="open-container">
    <!-- 导航栏 -->
    <uni-nav-bar title="开通会员" leftIcon="back" color="#000000" backgroundColor="#fff" @clickLeft="back" fixed>
    </uni-nav-bar>
    
    <!-- header -->
    <view class="header">
      <image src="/static/head.png"></image>
      <text>{{ mobile }}</text>
    </view>
    
    <!-- order 提示框 -->
    <view class="tips-wrap">
      <view class="content">
        <view class="left">
          <image src="/static/king.png"></image>
          <view>
            <view class="t1">好玩游戏会员</view>
            <view class="t2">尊享乐不停</view>
          </view>
        </view>
        <view class="right">
          <view>
            <text class="price">10</text><text>元/月</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 会员特权 -->
    <view class="rights">
      <view class="title">会员特权</view>
      <view class="cate-list">
        <view class="item">
          <image src="/static/c1.png"></image>
          <text>休闲</text>
        </view>
        <view class="item">
          <image src="/static/c2.png"></image>
          <text>益智</text>
        </view>
        <view class="item">
          <image src="/static/c3.png"></image>
          <text>冒险</text>
        </view>
        <view class="item">
          <image src="/static/c4.png"></image>
          <text>策略</text>
        </view>
      </view>
    </view>
    
    <!-- tips -->
    <view class="desc-wrap">
      <view class="t1">订购须知</view>
      <view>1. 订购后自动续订，需绑定好玩游戏的电信手机号。</view>
      <view>2. 若有任何问题，请拨打电话4006778819与我们联系。</view>
    </view>
    
    <!-- order-box -->
    <view class="order-box">
      <view class="left">
        <view>实付金额：<text class="t1">10</text><text>元</text></view>
      </view>
      <view class="right" @click="go2Bind">立即订购</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        mobile: uni.getStorageSync('hwyx-mobile')
      };
    },
    methods: {
      back() {
        uni.navigateBack({
          delta: 1
        })
      },
      go2Bind() {
        uni.navigateTo({
          url: '/pages/bind/bind'
        })
      }
    }
  }
</script>

<style lang="scss">
.open-container {
  background-color: #F8F8F8;
  // height: 100%;
  .header {
    height: 134rpx;
    background: linear-gradient(162deg, #8FAFFF 0%, #A1BBFF 100%);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 20rpx;
    image {
      width: 110rpx;
      height: 110rpx;
      margin-right: 30rpx;
    }
    text {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #F8F7FB;
    }
  }
  
  .tips-wrap {
    margin: 30rpx 20rpx;
    .content {
      display: flex;
      width: 694rpx;
      height: 142rpx;
      background: #333334;
      border-radius: 17rpx;
      border: 2px solid #FFCE89;
      color: #E5E5E5;
      .left {
        display: flex;
        align-items: center;
        flex: 2;
        border-right: 1px solid #FFCE89;
        image {
          width: 34rpx;
          height: 28rpx;
          margin-left: 26rpx;
          margin-right: 20rpx;
        }
        .t1 {
          font-size: 30rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #E5E5E5;
        }
        .t2 {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #E5E5E5;
        }
      }
      .right {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #E3BD7F;
        .price {
          font-size: 50rpx;
        }
      }
    }
  }
  
  // 会员特权
  .rights {
    margin-top: 30rpx;
    height: 303rpx;
    background-color: white;
    .title {
      padding: 20rpx 32rpx;
      font-size: 30rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #272729;
    }
    
    // 四个分类
    .cate-list {
      display: flex;
      justify-content: space-around;
      // margin-bottom: 30rpx;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 156rpx;
        height: 180rpx;
        background-color: white;
        border-radius: 8rpx;
        image {
          width: 68rpx;
          height: 68rpx;
          margin-bottom: 25rpx;
        }
        text {
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }
  // desc-wrap
  .desc-wrap {
    padding: 40rpx 20rpx;
    background-color: #F8F8F8;
    font-size: 26rpx;
    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    font-weight: 400;
    color: #5F5F5F;
    height: 240px;
    .t1 {
      font-weight: 500;
      color: #5F5F5F;
      margin-bottom: 15rpx;
    }
  }
  
  .order-box {
    position: fixed;
    bottom: 0;
    display: flex;
    width: 100%;
    height: 100rpx;
    background-color: #8FAFFF;
    .left {
      flex: 3;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 30rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #2E2E2E;
      background-color: white;
      text {
        font-size: 32rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #F2A21E;
      }
      .t1 {
        font-size: 50rpx;
        font-weight: 600;
      }
    }
    .right {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }
  }
}
</style>
